<template>
  <div class="cluster-container">
    <div class="cluster-plan">
      <h3>典型组团首层平面图</h3>
      <p class="note">轻触/悬停到图纸右上角查看该组团所在位置</p>
      <div class="imgArea">
        <img class="location" src="../assets/drawings/cluster-location.png">
        <img class="mainImg" src="../assets/drawings/cluster.png">
      </div>
    </div>
    <div class="unitType">
      <h3>户型图</h3>
      <div class="drawings-group" v-for="d in drawings" :key="d.fileName">
        <div class="drawing">
          <img :src="require(`../assets/drawings/${d.fileName}.png`)">
          <p class="note">▲{{d.title}}</p>
        </div>
        <div class="drawing" v-if="d.hasDetail">
          <img :src="require(`../assets/drawings/${d.detail.fileName}.png`)">
          <p class="note">▲{{d.detail.title}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cluster',
  data(){
    return{
      drawings: [
        {
          fileName: 'slap-type',
          title: '板楼单元A标准层平面图',
          hasDetail: true,
          detail: { fileName: 'two-room', title: '板楼二居室平面图' }
        },
        {
          fileName: 'tower-type',
          title: '塔楼单元C标准层平面图',
          hasDetail: true,
          detail: { fileName: 'three-room', title: '塔楼三居室平面图' }
        },
        {
          fileName: 'apartment',
          title: '公寓单元标准层平面图',
          hasDetail: false
        }
      ]
    }
  }
}
</script>

<style scoped>
.cluster-container{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.cluster-container > .cluster-plan, .cluster-container > .unitType{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 90%;
  position: relative;
}

.cluster-container h3{
  width: 100%;
  color: var(--green);
  font-weight: 600;
  font-size: 1.5rem;
}

.cluster-plan > .note{
  width: 100%;
  margin: 1rem 0;
}

.cluster-plan > .imgArea{
  width: min(120vh, 110%);
  position: relative;
}

.imgArea > .mainImg{
  width: 100%;
  transition: all 0.5s ease-out;
}

.imgArea > .location{
  position: absolute;
  top: 2%;
  right: 7%;
  width: 15%;
  border-radius: min(10%, 16px);
  opacity: 0;
  z-index: 1;
  transition: all 0.5s ease-out;
}

.imgArea > .location:hover{
  opacity: 1;
  width: 64%;
  transition: all 0.5s ease-out;
}

.imgArea > .location:hover ~ .mainImg{
  opacity: 0;
  transition: all 0.5s ease-out;
}

.unitType > .drawings-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-top: 2rem;
}

.drawings-group > .drawing{
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.drawings-group > .drawing:nth-child(1){
  width: 56%;
}

.drawings-group > .drawing:nth-child(2){
  width: 42%;
}

.drawing:nth-child(1) > img{
  width: 100%;
}

.drawing:nth-child(2) > img{
  width: 100%;
}

@media screen and (max-width: 767px) {
  .unitType > .drawings-group{
    flex-direction: column;
    margin-top: 0;
  }
  .drawings-group > .drawing:nth-child(1){
    width: 96%;
    margin-top: 1.5rem;
  }
  .drawings-group > .drawing:nth-child(2){
    width: 72%;
    margin-top: 1.5rem;
  }
}
 
</style>